<template>
  <el-container>
      <el-header>
        <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="68px">
          <el-form-item label="归属部门" prop="name">
<!--            <el-tree-->
<!--              :data="data"-->
<!--              show-checkbox-->
<!--              default-expand-all-->
<!--              node-key="id"-->
<!--              ref="tree"-->
<!--              highlight-current-->
<!--              :props="defaultProps">-->
<!--            </el-tree>-->
            <el-button style="background-color:#061431; border: 1px solid #1A6288 "  @click="deptShow"  type="primary">{{btnName}}</el-button>
<!--            <el-input-->
<!--              v-model="queryParams.contractSn"-->
<!--              @click.native="deptShow"-->
<!--              placeholder="请点击选择合同归属部门"-->
<!--              clearable-->
<!--              :disabled="true"-->
<!--              size="small"-->
<!--            />-->

          </el-form-item>
          <el-form-item label="合同编号" prop="name">
            <el-input
              v-model="queryParams.contractSn"
              placeholder="请输入合同编号"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="合同名称" prop="name">
            <el-input
              v-model="queryParams.contractName"
              placeholder="请输入合同名称"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="合作单位" prop="name">
            <el-input
              v-model="queryParams.contractFactory"
              placeholder="请输入合作单位名称"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="签订时间" prop="name">
            <el-date-picker
              v-model="timeValue"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-button style="background-color:#061431; border: 1px solid #1A6288 "   @click="getContractData" type="primary">查询</el-button>
        </el-form>
      </el-header>
    <el-main>
      <el-table
        :data="contractData"
        border
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        empty-text="暂无数据"
        align="center"
        style="width: 100%;">
        <el-table-column
          prop="date"
          label="序号"
          width="60"
          >
          <template slot-scope="scope">
            <span>{{(queryParams.current-1)*queryParams.size+( scope.$index + 1)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="contractSn"
          label="合同编号"
          align="center"
         >
        </el-table-column>
        <el-table-column
          prop="contractName"
          align="center"
          label="合同名称">
        </el-table-column>
        <el-table-column
          prop="createTime"
          align="center"
          width="200"
          label="签订时间">
        </el-table-column>
        <el-table-column
          prop="deptName"
          align="center"
          label="签订部门">
        </el-table-column>
        <el-table-column
          prop="contractType"
          align="center"
          label="合同类型">
        </el-table-column>
        <el-table-column
          prop="contractFactory"
          align="center"
          label="合作单位名称">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="200"
          >
          <template slot-scope="scope">
            <el-button  type="primary" size="small" @click="showDeatail(scope.row)">查看详情</el-button>
            <el-button  type="primary" size="small" @click="updateHtInfo(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
          <div style="width: 500px;margin-left: auto;margin-right: auto">
            <el-pagination
              background
              :page-size="queryParams.size"
              @current-change="pageChange"
              layout="total, prev, pager, next"
              :total="total">>
            </el-pagination>
          </div>
    </el-footer>

  <el-dialog
    title="合同详情"
    :visible.sync="htVisual"
    width="70%"
  >
    <el-row :gutter="20">
        <el-col span="12">
           <div style="color: white;font-size: 16px">合同详情：</div>
          <table style="width: 100%">
            <tbody style="color: #D2C172;text-align: center">
            <tr  style="height: 40px">
              <td>合同编号</td>
              <td>{{htDetail.contractSn}}</td>
            </tr>
            <tr style="height: 40px">
              <td>合同名称</td>
              <td>{{htDetail.contractName}}</td>
            </tr>
            <tr  style="height: 40px">
              <td>合同编号</td>
              <td>{{htDetail.contractSn}}</td>
            </tr>
            <tr style="height: 40px">
              <td>签订时间</td>
              <td>{{htDetail.createTime}}</td>
            </tr>
            <tr style="height: 40px">
              <td>发起人</td>
              <td>{{htDetail.createBy}}</td>
            </tr>
            <tr  style="height: 40px">
              <td>合同类型</td>
              <td>{{htDetail.contractType}}</td>
            </tr>
            <tr style="height: 40px">
              <td>部门</td>
              <td>{{htDetail.deptName}}</td>
            </tr>
            <tr  style="height: 40px">
              <td>供应商名称</td>
              <td>{{htDetail.contractFactory}}</td>
            </tr>
            <tr style="height: 40px">
              <td>合同金额(小写)</td>
              <td>{{htDetail.money}}</td>
            </tr>
            <tr style="height: 40px">
              <td>单价</td>
              <td>{{htDetail.price}}</td>
            </tr>
            <tr style="height: 40px">
              <td>数量</td>
              <td>{{htDetail.priceCount}}</td>
            </tr>
            <tr style="height: 40px">
              <td>采购方式</td>
              <td>{{htDetail.buyType}}</td>
            </tr>
            <tr style="height: 40px">
              <td>招标编号/询比价编号</td>
              <td @click="selectDetail" style="text-decoration: underline;cursor: pointer">{{htDetail.projectId}}</td>
            </tr>
            <tr style="height: 40px">
              <td>备注</td>
              <td>{{htDetail.remarks}}</td>
            </tr>
            </tbody>
          </table>
        </el-col>
      <el-col span="6" style="min-height: 500px">
        <div style="color: white;font-size: 16px">付款比列：</div>
        <div style="height: 400px;">
          <pieChart style="height: 100%" ref="pieChart"></pieChart>
        </div>
      </el-col>
        <el-col span="6" style="min-height: 500px">
          <div style="color: white;font-size: 16px">合同执行情况：</div>
          <div style="height: 400px;">
            <el-steps direction="vertical" :active="contractPlan.length+1" >
              <el-step title="合同签订" :description="'签订时间:'+htDetail.createTime"></el-step>
              <el-step v-for="(item,index) in  contractPlan" title="合同付款" :description="item.createTime+','+item.foundUse+'金额：'+item.payCountXx+',结算方式：'+item.jsType"></el-step>
            </el-steps>
          </div>
        </el-col>
    </el-row>
  </el-dialog>
    <el-dialog
      title="合同明细"
      :visible.sync="htDetailShow"
      width="80%"
    >
      <el-table
        :data="contractDetails"
        border
        v-loading="htLoading"
        element-loading-text="拼命加载中"
        empty-text="暂无数据"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        align="center"
        style="width: 100%;">
        <el-table-column
          prop="date"
          label="序号"
          width="60"
        >
          <template slot-scope="scope">
            <span>{{(queryParams.current-1)*queryParams.size+( scope.$index + 1)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="sn"
          label="项目编号"
          align="center"
          width="240"
        >
        </el-table-column>
        <el-table-column
          prop="materialCode"
          align="center"
          label="物料编码">
        </el-table-column>
        <el-table-column
          prop="materialName"
          align="center"
          width="260"
          label="物料名称">
        </el-table-column>
        <el-table-column
          prop="spec"
          align="center"
          width="200"
          label="规格型号">
          <template slot-scope="scope">
            <el-tooltip
              :content="scope.row.spec"
              placement="top-start"
              :width="200"
            >
              <div class="text-ellipsis">
                {{ scope.row.spec }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="unit"
          align="center"
          label="单位名称">
        </el-table-column>
        <el-table-column
          prop="price"
          align="center"
          label="单价">
        </el-table-column>
        <el-table-column
          prop="awardQty"
          align="center"
          label="数量">
        </el-table-column>
        <el-table-column
          prop="awardQty"
          align="center"
          label="总价">
          <template slot-scope="scope">
            <span>{{scope.row.awardQty*scope.row.price}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="currency"
          align="center"
          label="币种">
        </el-table-column>
        <el-table-column
          prop="taxRate"
          align="center"
          label="税率">
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      title="修改合同信息"
      :visible.sync="updateHtShow"
      width="60%"
    >
        <el-form ref="form" :model="selectData"  label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同编号" prop="nickName" style="color: white">
                <el-input v-model="selectData.contractSn" placeholder="请输入合同编号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同名称" prop="nickName">
                <el-input v-model="selectData.contractName" placeholder="请输入合同名称" />
              </el-form-item>
            </el-col>
<!--            <el-col :span="12">-->
<!--              <el-form-item label="签订时间" prop="nickName" style="color: white">-->
<!--                <el-input v-model="selectData.createTime" :disabled="true" placeholder="请输入签订时间" />-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="12">
              <el-form-item label="合同类型" prop="nickName">
                <el-select v-model="selectData.contractType" placeholder="请选择">
                  <el-option
                    v-for="item in optionsType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同节点" prop="nickName" style="color: white">
                <el-select v-model="selectData.contractNode" placeholder="请选择">
                  <el-option
                    v-for="item in optionsNode"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="签订时间" prop="nickName">
                <el-input v-model="selectData.createTime" :disabled="true" placeholder="请输入签订时间" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合作单位" prop="nickName" style="color: white">
                <el-input v-model="selectData.contractFactory" :disabled="true" placeholder="请输入合同编号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同描述" prop="nickName">
                <el-input v-model="selectData.contractDesc" :disabled="true" placeholder="请输入合同名称" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary"  @click="updateInfo" >确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog
      title="请选择部门"
      :visible.sync="showDept"
      width="40%"
    >
      <el-tree
        ref="tree"
        :data="treedata"
        show-checkbox
        node-key="id"
        default-expand-all
        :props="defaultProps">
      </el-tree>
       <div style="width: 80px;margin-left: auto;margin-right: auto">
         <el-button style="background-color:#061431; border: 1px solid #1A6288;width: 80px "   @click="qrxzbm" type="primary">确定</el-button>
       </div>


    </el-dialog>
</el-container>
</template>

<script>
  import {   listContract ,listContractPlan,getContractDetail,updateHt} from "@/api/biInfo/contractManage";

  import pieChart from '../../dashboard/BiPieChart'
  import lineChart from '../../dashboard/BiLineChart'
  import barLineCharts from '../../dashboard/BiBarLineCharts'
  import { deptTree} from "@/api/system/dept";
  export default {
    name: 'index',
    components: {
      pieChart,
      lineChart,
      barLineCharts
    },
    data() {
      return {
        updateHtShow:false,
        loading:false,
        showDept:false,
        htVisual:false,
        optionsNode:[{
          value: '已签订',
          label: '已签订'
        },
          {
            value: '执行中',
            label: '执行中'
          },
          {
            value: '已验收',
            label: '已验收'
          },
          {
            value: '质保期',
            label: '质保期'
          },
          {
            value: '已完结',
            label: '已完结'
          }],
        btnName:'点击根据部门查看合同',
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        optionsType: [{
          value: '定量定价合同',
          label: '定量定价合同-销售'
        }, {
          value: '年度框架合同',
          label: '年度框架合同-销售'
        }, {
          value: '生产废物处置合同',
          label: '生产废物处置合同-销售'
        }, {
          value: '设备合同',
          label: '设备合同-五金'
        }, {
          value: '设备配件及耗材合同',
          label: '设备配件及耗材合同-五金'
        },
          {
            value: '试剂合同',
            label: '试剂合同-五金'
          },
          {
            value: '办公设备及耗材合同',
            label: '办公设备及耗材合同-五金'
          },
          {
            value: '生产原料合同',
            label: '生产原料合同-原料'
          },
          {
            value: '生产辅料合同',
            label: '生产辅料合同-原料'
          },
          {
            value: '公用服务合同',
            label: '公用服务合同-服务合同'
          },{
            value: '金融服务合同',
            label: '金融服务合同-服务合同'
          },
          {
            value: '工程基建合同',
            label: '工程基建合同-服务合同'
          },
          {
            value: '软件系统合同',
            label: '软件系统合同-服务合同'
          },
          {
            value: '运维合同',
            label: '运维合同-服务合同'
          },
          {
            value: '维修合同',
            label: '维修合同-服务合同'
          },
          {
            value: '劳务派遣合同',
            label: '劳务派遣合同-服务合同'
          },
          {
            value: '第三方评价、服务合同',
            label: '第三方评价、服务合同-服务合同'
          },
          {
            value: '职工福利合同',
            label: '职工福利合同-服务合同'
          },
          {
            value: '政府或政策性合同',
            label: '政府或政策性合同'
          },
        ],
        timeValue:"",
        htDetail:{},
        deptOptions:[],
        treedata: [],
        queryParams:{
          current: 1,
          size: 15,
          contractSn:"",
          contractName:"",
          contractFactory:"",
          userId:this.$store.getters.name,
          startTime:'',
          endTime:'',
          selDepts:""
        },
        total:0,
        contractData:[],
        contractPlan:[],
        contractDetails:[],
        htDetailShow:false,
        htLoading:false,
        selectData:{},
      }
    },
    methods:{
           getContractData(){
             this.loading=true;
             let x=this.timeValue;
             if(this.timeValue!='' && this.timeValue.length==2){
                  this.queryParams.startTime=this.timeValue[0];
                  this.queryParams.endTime=this.timeValue[1];
             }
             listContract(this.queryParams).then(response => {
               this.contractData=response.data;
               this.total = response.total;
                this.loading=false;
             })
           },
      //
      updateInfo(){
             this.selectData.createTime=null;
        updateHt(this.selectData).then(response => {
                   this.updateHtShow=false;
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.getContractData();
        });
      },
      updateHtInfo(data){
         this.updateHtShow=true;
         this.selectData=data;
      },
      qrxzbm(){
        let checkedNodes = this.$refs.tree.getCheckedNodes();
        this.btnName="";
        debugger;
        this.queryParams.selDepts="";
        if(checkedNodes.length>0) {
          checkedNodes.forEach((item, index) => {
            this.btnName += item.label + ",";
            this.queryParams.selDepts+=item.id+","
          })

          this.queryParams.current=1;
          this.getContractData();
          this.showDept=false;
        }
      },
      // qrxzbm(){
      //   let checkedNodes = this.$refs.tree.getCheckedNodes();
      //   let  delId=[];
      //   this.btnName="";
      //   let  deptIds="";
      //   if(checkedNodes.length>0) {
      //     checkedNodes.forEach((item, index) => {
      //       // if(item.children.length>0){
      //       //    delId.push(item.id);
      //       // }else{
      //       this.btnName += item.label + ",";
      //       deptIds += item.id + ",";
      //       //   }
      //       // })
      //       // checkedNodes = checkedNodes.filter(item => !delId.some(id => id === item.id));
      //     })
      //   }
      //
      // },
      getDeptInfo(){
        deptTree().then(response => {
          this.traverseTreeDFS(response.data[0], node =>this.upinfo(node) );
            this.treedata = response.data;
        });
      },
      upinfo(node){
          node.id=node.code;
          node.label=node.name;
      },
      traverseTreeDFS(node, callback) {
        if (node) {
          callback(node); // 处理当前节点
          for (let child of node.children) {
            this.traverseTreeDFS(child, callback); // 递归处理子节点
          }
        }
      },
  pageChange(page){
              this.queryParams.current=page;
              this.getContractData();
  },
      selectDetail(){
             let  query={SN:this.htDetail.projectId};
             this.htDetailShow=true;
             this.htLoading=true;
        getContractDetail(query).then(response => {
              this.htLoading=false;
              this.contractDetails=response.data;
        })
      },
      deptShow(){
        this.showDept=true;
        this.getDeptInfo();

      },
          showDeatail(data){
             this.htVisual=true;
             this.htDetail=data;
             let queryParams={
               current: 1,
               size: 150,
               contractId:data.contractSn
             }
            listContractPlan(queryParams).then(response => {
              this.contractPlan=response.data;
              let yfk=0;
              debugger;
              response.data.forEach((item,index)=>{
                   yfk+=parseFloat(item.payCountXx);
              })
              debugger;
              let  chartData={
                series:[{
                  name:'数据来源图',
                  type: 'pie',
                  radius: [60, 95],
                  center: ['50%', '38%'],
                  data:[]
                }],
                lengendData:["已付款",'待付款'],
                legShow:null
              };
              chartData.series[0].data=[{
                name:"已付款",
                value:yfk
              },
                {
                  name:"待付款",
                  value:data.money-yfk
                }
              ];
              this.$refs.pieChart.setData(chartData);
            })

          }
    },
    mounted() {
    this.getContractData();
    }
  }
</script>

<style scoped>
  table, th, td {
    border: 1px solid #368AB6;
    border-collapse: collapse;
  }

</style>
